import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import classnames from 'classnames'
import { ListMenuType } from 'utils/enums'
import { DropOption } from 'components'
import queryString from 'query-string'
import styles from './index.less'

const confirm = Modal.confirm
const List = ({ noOperation, createTransction, onDeleteItem, onEditItem, onArriveItem,handleAvailable, onPayItem, onReportItem, onClikDetail, onClickXML, onSetPermission, location, columnsData, menuType, ...tableProps }) => {
  location.query = queryString.parse(location.search)
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      confirm({
        title: 'Are you sure delete this record?',
        onOk () {
          if (location.pathname === '/basicdata') {
            onDeleteItem({ id: record.id, type: record.type })
          } else {
            onDeleteItem(record.id || record)
          }
        },
      })
    } else if (e.key === '3') {
      onArriveItem(record.id)
    } else if (e.key === '4') {
      onReportItem(record.id)
    } else if (e.key === '5') {
      onPayItem(record.id)
    } else if (e.key === '6') {
      onClikDetail(record)
    } else if (e.key === '7') {
      onClickXML(record)
    } else if (e.key === '8') {
      createTransction(record.customerNumber)
    } else if (e.key === '9') {
      onSetPermission(record)
    }else if (e.key === '10') {
      handleAvailable(record)
    }
  }
  const menuData = [{
    key: '1',
    name: 'Update',
  }, {
    key: '2',
    name: 'Delete',
  }, {
    key: '3', // 到账
    name: 'Arrive',
  }, {
    key: '4',
    name: 'Reported',
  }, {
    key: '5',
    name: 'Pay',
  }, {
    key: '6',
    name: 'Detail',
  }, {
    key: '7',
    name: 'XML',
  },
  {
    key: '8',
    name: 'Create transction',
  },
  {
    key: '9',
    name: 'Set Permission',
  },
  {
    key: '10',
    name: 'Change Status',
  },
  ]

  const createMenu = (type, data) => {
    let resArr = []
    for (let i = 0; i < data.length; i++) {
      let s = type & (1 << i)
      if (s !== 0) {
        resArr.push(data[i])
      }
    }
    return resArr
  }
  let columns = columnsData.slice(0) // 数组深拷贝
  const createColumns = () => {
    if (typeof noOperation === 'undefined') {
      let operColumn = {
        title: 'Operation',
        key: 'operation',
        width: 100,
        render: (text, record) => {
          if (record.status === '0') {
            menuType = ListMenuType.MENU_UPDATE + ListMenuType.MENU_DELETE + ListMenuType.MENU_ARRIVE + ListMenuType.MENU_PAY
          } else if (record.status === '1') {
            menuType = ListMenuType.MENU_DELETE + ListMenuType.MENU_ARRIVE + ListMenuType.MENU_PAY
          }
          let menulistArr = createMenu(menuType, menuData)
          return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={menulistArr}/>
        },
      }
      columns.push(operColumn)
    }
  }
  const unOptionPathArr = ['/dashboard', '/customersurplus']
  if (!unOptionPathArr.includes(location.pathname)) {
    createColumns()
  }
  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}
        bordered
        scroll={{ x: 700 }}
        columns={columns}
        simple
        rowKey={record => record.id}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
  columnsData: PropTypes.array,
  menuType: PropTypes.number,
  onReceiveItem: PropTypes.func,
  onPayItem: PropTypes.func,
  onReportItem: PropTypes.func,
  onClikDetail: PropTypes.func,
  onClickXML: PropTypes.func,
  createTransction: PropTypes.func,
}

export default List
